import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { AntDesign } from '@expo/vector-icons';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import IndexScreen from '.';
import ChatScreen from './chat';
import SquareScreen from './square';
import MyScreen from './my';
import { Provider } from 'react-redux';
import store from '@/store/postindex';




const Tabs = createBottomTabNavigator();

const tabScreenOptions = (label: string, iconName: keyof typeof AntDesign.glyphMap) => ({
  tabBarLabel: label,
  tabBarIcon: ({ color, size }) => (
    <AntDesign name={iconName} color={color} size={18} />
  ),
});

export default function TabLayout() {
  return (
    <Provider store={store}>
      <Tabs.Navigator
        id={undefined}
        screenOptions={{ headerShown: false }}>
        <Tabs.Screen name='index' component={IndexScreen} options={tabScreenOptions('首页', 'home')} />
        <Tabs.Screen name="chat" component={ChatScreen} options={tabScreenOptions('聊天', 'message1')} />
        <Tabs.Screen name="square" component={SquareScreen} options={tabScreenOptions('广场', 'plussquare')} />
        <Tabs.Screen name="my" component={MyScreen} options={tabScreenOptions('我的', 'user')} />
      </Tabs.Navigator>
    </Provider>
  );
}
